<template>
 <footer class="footer" v-if="list.length">
      <span class="todo-count" ><strong>{{count}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected: type === 'all'}" href="#/" @click.prevent="changeType('all')">全部</a>
        </li>
        <li>
          <a :class="{selected: type === 'active'}" href="#/active"  @click.prevent="changeType('active')">进行中</a>
        </li>
        <li>
          <a :class="{selected: type === 'completed'}" href="#/completed" @click.prevent="changeType('completed')" >已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clearList" v-show="isDoneAll">清除已完成</button>
    </footer>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: {
    list:{
       type:Array,
       required:true,
    },
    isDoneAll:{
       type:Boolean,
       required:true
    },
    type:{
      type:String,
      require:true
    }
  },
  computed:{
    //剩余任务数量
     count(){
       return this.list.filter(item => item.isDone ===false).length
     },
    
  },
  methods:{
     clearList(){
       this.$emit('clearList')
     },
     changeType(type){
        this.$emit('changeType',type)
     }
  }

}
</script>

<style scoped lang="less"></style>